<script setup lang="ts">
const visible = defineModel('visible', { default: false })

const treeData = ref([
  {
    label: '首页',
    value: 'a',
  },
  {
    label: '项目管理',
    value: 'b',
    children: [
      {
        label: '新增',
        value: 'b-1',
      },
      {
        label: '编辑',
        value: 'b-2',
      },
      {
        label: '删除',
        value: 'b-3',
      },
    ],
  },
  {
    label: '应用管理',
    value: 'c',
    children: [
      {
        label: '新增',
        value: 'c-1',
      },
      {
        label: '编辑',
        value: 'c-2',
      },
      {
        label: '删除',
        value: 'c-3',
      },
    ],
  },
  {
    label: '菜单管理',
    value: 'd',
    children: [
      {
        label: '新增',
        value: 'd-1',
      },
      {
        label: '编辑',
        value: 'd-2',
      },
      {
        label: '删除',
        value: 'd-3',
      },
    ],
  },
  {
    label: '用户管理',
    value: 'e',
    children: [
      {
        label: '新增',
        value: 'e-1',
      },
      {
        label: '编辑',
        value: 'e-2',
      },
      {
        label: '删除',
        value: 'e-3',
      },
    ],
  },
])

const model = ref({ a: 1 })
const domains = ref([
  {
    env: 'dev',
    envName: '开发环境',
    url: 'http://localhost:6061',
  },
  {
    env: 'test',
    envName: '测试环境',
    url: 'http://localhost:6061',
  },
  {
    env: 'release',
    envName: '预发环境',
    url: 'http://localhost:6061',
  },
  {
    env: 'master',
    envName: '生产环境',
    url: 'http://localhost:6061',
  },
])
</script>

<template>
  <ElDialog
    v-model="visible"
    title="添加应用"
    width="1200"
  >
    <div class="content">
      <ElSpace
        class="w-full"
        direction="vertical"
      >
        <ElCard>
          <BaseFilter
            title="应用"
            :model-value="1"
            :options="[
              { label: '权限中心', value: 1 },
              { label: '配置中心', value: 2 },
              { label: '翻译中心', value: 3 },
            ]"
          />
        <!-- <BaseFilter
          title="状态"
          has-all
          :options="[
            { label: '开启', value: 1 },
            { label: '关闭', value: 0 },
          ]"
        /> -->
        </ElCard>

        <ElCard>
          <BaseInfoTitle title="菜单权限列表">
            <template #content>
              <ElInput
                placeholder="菜单搜索"
              />
            </template>
          </BaseInfoTitle>

          <ElTree
            class="mt-16px"
            :data="treeData"
            show-checkbox
            align-center
          >
            <template
              #default="{ data }"
            >
              <div class="mr-12px">
                {{ data.label }}
              </div>
            </template>
          </ElTree>
        </ElCard>
      </ElSpace>

      <ElCard>
        <ElForm
          :model="model"
          label-width="auto"
        >
          <ElFormItem label="域名:">
            <ElForm
              label-width="auto"
              class="w-full"
            >
              <ElFormItem
                v-for="domain in domains"
                :key="domain.env"
                :label="domain.envName"
              >
                <ElInput
                  v-model="domain.url"
                  class="w-full"
                />
              </ElFormItem>
            </ElForm>
          </ElFormItem>
        </ElForm>
      </ElCard>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="visible = false">
          取消
        </ElButton>
        <ElButton
          type="primary"
          @click="visible = false"
        >
          确认
        </ElButton>
      </div>
    </template>
  </ElDialog>
</template>

<style lang="less" scoped>
.content {
  block-size: 100%;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

:deep(.el-space__item) {
  inline-size: 100%;
}
</style>
